<div class="jigsaw-combo-select"
     [class.jigsaw-combo-select-opened]="_$opened"
     [class.jigsaw-combo-select-disabled]="disabled"
     (mouseenter)="_$openByHover($event)"
     (mouseleave)="_$closeByHover($event)"
     (click)="_$openAndCloseByClick($event)">
    <div class="jigsaw-combo-select-selection">
        <div class="jigsaw-combo-select-selection-rendered">
            <jigsaw-tag *ngFor="let tagItem of value; trackBy: _$trackByFn"
                        [closable]='tagItem.closable'
                        [showBorder]="showValueBorder"
                        (select)="_$tagClick(tagItem)"
                        (close)="_$removeTag(tagItem)">
                {{tagItem[labelField] ? tagItem[labelField] : tagItem}}
            </jigsaw-tag>
            <jigsaw-input #editor *ngIf="searchable && !disabled" [(value)]="searchKeyword" [disabled]="searching"
                          width="100%" (valueChange)="_$handleSearchBoxChange()"
                          [clearable]="false" [placeholder]="value.length == 0 ? placeholder : ''">
            </jigsaw-input>
            <div class="jigsaw-combo-select-placeholder" *ngIf="placeholder && value.length == 0 && !searchable">
                {{placeholder}}
            </div>
        </div>
    </div>
    <i class="fa fa-times-circle jigsaw-combo-select-clear"
       *ngIf="clearable && value && value.length != 0" (click)="_$clearValue()"></i>
    <i class="fa fa-angle-down jigsaw-combo-select-arrow"></i>
</div>
<ng-content></ng-content>
